<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="75px"
        >
            <el-form-item label="课程名称" prop="courseName">
                <el-input
                    v-model="queryParams.courseName"
                    placeholder="请输入课程名称"
                    clearable
                    size="small"
                    style="width: 240px"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="课程名称" align="center" prop="courseName">
            </el-table-column>
            <el-table-column
                label="应修学时"
                align="center"
                prop="shouldPeriod"
                :formatter="formatDuring"
            >
            </el-table-column>
            <el-table-column
                label="已修学时"
                align="center"
                width="100px"
                prop="alreadyPeriod"
                :formatter="formatDuring"
            >
            </el-table-column>
            <el-table-column
                label="答题学时"
                align="center"
                width="100px"
                prop="answerPeriod"
                :formatter="formatDuring"
            />
            <el-table-column
                label="培训学时"
                align="center"
                width="100px"
                prop="trainPeriod"
                :formatter="formatDuring"
            />
            <!-- <el-table-column label="培训学时" align="center">
                <template>
                    缺项
                </template>
            </el-table-column> -->
            <el-table-column
                label="总题量"
                align="center"
                prop="questionCount"
            />
            <el-table-column label="已答提量" align="center" prop="answerNum">
            </el-table-column>
            <el-table-column label="答对题量" align="center" prop="rightNum" />
            <el-table-column label="答对正确率" align="center">
                <template slot-scope="scope">
                    {{
                        scope.row.answerNum == 0
                            ? 0
                            : (
                                  (scope.row.rightNum * 100) /
                                  scope.row.answerNum
                              ).toFixed(1)
                    }}%
                </template>
            </el-table-column>
            <el-table-column label="完成状态" align="center" prop="remark">
                <template slot-scope="scope">
                    {{
                        scope.row.alreadyPeriod >= scope.row.shouldPeriod
                            ? "已完成"
                            : "未完成"
                    }}
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>
<script>
import { formatDuring } from '@/utils/validate'
import { userProjectCourseRecords } from '@/api/system/train'
export default {
    name: 'tranCourse',
    data () {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 课程表格数据
            list: [],
            queryParams: {
                "deptId": "",
                "pageNum": 0,
                "pageSize": 10,
                "projectId": "",
                "userId": "",
                "userName": "",
                "courseName": ""
            },
            formatDuring: null
        }
    },
    created () {
        this.formatDuring = formatDuring
        this.queryParams.projectId = this.$route.query.projectId
        this.queryParams.userId = this.$route.query.userId
        this.getList()
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        getList () {
            if (this.loading) return false
            this.loading = true;
            userProjectCourseRecords(this.queryParams).then(response => {
                this.list = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },
    }
}
</script>
<style scoped>
</style>
